<!--
 * @Author: actor
 * @Date: 2023-11-22 14:36:21
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 15:32:26
 * @FilePath: \i-hos-app\shared\emr\src\views\rpo\rpoDetails.vue
 * @Description: 知识库数据详情
-->
<template>
  <div class="rpoDetails">
    <el-descriptions title="基本信息" :column="2">
      <el-descriptions-item label="分类:">{{ detailsData.emrKnowledgeBaseCategoryName }}</el-descriptions-item>
      <el-descriptions-item label="名称:">{{ detailsData.emrKnowledgeBaseMainName }}</el-descriptions-item>
      <el-descriptions-item label="ID:">{{ detailsData.emrKnowledgeBaseMainId }}</el-descriptions-item>
      <el-descriptions-item label="编码:">{{ detailsData.emrKnowledgeBaseMainCode }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" style="margin-top: 20px">
      <template #title>
        <div class="tableTitle">
          <span>值域</span>
          <el-button
            link
            type="primary"
            @click="
              (): void => {
                dialogvisible = !dialogvisible
              }
            "
            icon="Plus"
            >新增</el-button
          >
        </div>
      </template>
      <el-descriptions-item>
        <el-table :data="detailsData.detailList" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="40" />
          <el-table-column prop="emrKnowledgeBaseDetailName" label="名称" />
          <el-table-column prop="valuefield" label="值域" />
          <el-table-column prop="" label="操作" width="60">
            <template #default="scope">
              <el-icon size="14" color="#409eff" @click.stop="handleEdit(scope.row)"><Edit /></el-icon>
              <el-icon size="14" color="#f56c6c" @click.stop="handleRemove(scope.row)"><Delete /></el-icon>
            </template>
          </el-table-column>
        </el-table>
      </el-descriptions-item>
    </el-descriptions>
  </div>

  <!-- 添加分类弹窗 -->
  <el-dialog v-model="dialogvisible" title="新增/编辑" width="300" align-center draggable>
    <el-form :model="sortForm" label-width="60px">
      <el-form-item label="分类名称">
        <el-input clearable placeholder="请输入分类名称" v-model="sortForm.fatherName" disabled />
      </el-form-item>
      <el-form-item label="名称">
        <el-input clearable placeholder="请输入名称" v-model="sortForm.name" />
      </el-form-item>
      <el-form-item label="值域">
        <el-input clearable placeholder="请输入值域" v-model="sortForm.valuefield" />
      </el-form-item>
      <el-form-item>
        <el-button
          @click="
            (): void => {
              dialogvisible = !dialogvisible
            }
          "
          >取消</el-button
        >
        <el-button type="primary" @click="commitAdd">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
  import { reactive, ref, Ref, watch, getCurrentInstance } from 'vue'
  // 配置类型约束
  import { ISortForm } from '../../interface/pageShare'
  // 父组件值
  const props = defineProps({
    id: {
      type: String || Number,
      default: '',
    },
  })

  // 初始话数据
  const { proxy } = getCurrentInstance() as any
  let detailsData: Ref<any> = ref({}), // 值域
    dialogvisible: Ref<boolean> = ref(false), // 新增或编辑弹层
    sortForm: ISortForm = reactive({
      // 弹层回填数据
      parentId: '',
      fatherName: '',
      id: '',
      name: '',
      valuefield: '',
    })

  // 获取详情
  const fetchDstails = () => {
    const url: string = APP_GLOBAL.API['EMR']['category-table-details']
    proxy.$http.requestJSON('post', url, props.id).then((res: any) => {
      if (res.data) {
        detailsData.value = res.data
        sortForm.parentId = res.data.emrKnowledgeBaseMainId
        sortForm.fatherName = res.data.emrKnowledgeBaseMainName
      }
    })
  }

  // 编辑
  const handleEdit = (flag: any): void => {
    dialogvisible.value = !dialogvisible.value
    sortForm.name = flag.emrKnowledgeBaseDetailName
    sortForm.id = flag.emrKnowledgeBaseDetailId
    sortForm.valuefield = flag.valuefield
  }
  // 删除
  const handleRemove = (flag: any): void => {
    const url: string = APP_GLOBAL.API['EMR']['category-details-valuefield-remove']
    proxy.$http.requestJSON('post', url, [flag.emrKnowledgeBaseDetailId]).then((res: any) => {
      if (res.data) fetchDstails()
    })
  }

  // 新增或编辑提交
  const commitAdd = (): void => {
    const url: string = APP_GLOBAL.API['EMR']['category-details-saveOrUpdate']
    proxy.$http
      .requestJSON('post', url, {
        emrKnowledgeBaseDetailId: sortForm.id,
        emrKnowledgeBaseDetailName: sortForm.name,
        emrKnowledgeBaseMainId: sortForm.parentId,
        valuefield: sortForm.valuefield,
      })
      .then((res: any) => {
        if (res.data) {
          dialogvisible.value = !dialogvisible.value
          fetchDstails()
        }
      })
  }

  watch(
    (): string | number => props.id,
    (): void => {
      if (props.id) fetchDstails()
    },
    {
      deep: true,
      immediate: true,
    }
  )
  watch(
    (): boolean => dialogvisible.value,
    (): void => {
      if (!dialogvisible.value) {
        sortForm.name = ''
        sortForm.id = ''
        sortForm.valuefield = ''
      }
    }
  )
</script>

<style scoped lang="scss">
  :deep(.el-descriptions__header .el-descriptions__title) {
    color: #409eff;
    font-weight: normal;
    width: 100%;
  }
  :deep(.el-descriptions__body) {
    background: #fafafa;
    padding: 7px;
    .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
      padding-bottom: 0;
    }
  }
  .el-icon {
    margin: 0 2px;
    cursor: pointer;
  }
  .tableTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
